<template>
    <div>
      <div class="demo-nav" style>
        <div class="demo-nav__title">入驻申请</div>
        <router-link :to="'/local_index'" class="demo-nav__back">
          <svg viewBox="0 0 1000 1000" >
            <path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">
            </path>
          </svg>
        </router-link>
      </div>
      <div>
        <van-form style="text-align: left">
          <van-cell>
            <template #title>
              <span class="custom-title" style="height: 3rem;line-height: 3rem">企业logo</span>
            </template>
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
<!--              <van-uploader :after-read="afterReadSupplierPic">-->
<!--                <van-image-->
<!--                  round-->
<!--                  width="3rem"-->
<!--                  height="3rem"-->
<!--                  fit="cover"-->
<!--                  :src="supplierPic"-->
<!--                  v-show="supplierPic == null ? false : true"/>-->
<!--                <img v-show="supplierPic == null ? true : false" src="@/assets/111.png" style="display: block;height: 3rem;width: 3rem;border-radius: 1rem">-->
<!--              </van-uploader>-->
              <van-uploader
                round
                width="3rem"
                height="3rem"
                v-model="supplierPic"
                :deletable="false"
                :max-count="1"
                :after-read="afterReadSupplierPic"
              >

              </van-uploader>

            </template>
          </van-cell>
          <van-field
            v-model="form.shopsName"
            type="text"
            name="企业(店铺)名称"
            label="企业(店铺)名称"
            placeholder="企业(店铺)名称"
            :rules="[{ required: true, message: '请填写企业(店铺)名称' }]"
          />


          <van-field
            v-model="form.linkMan"
            name="联系人"
            label="联系人"
            placeholder="联系人"
            :rules="[{ required: true, message: '请填写联系人' }]"
          />
          <van-field
            v-model="form.phoneNumber"
            name="联系手机号"
            label="联系手机号"
            placeholder="联系手机号"
            :rules="[{ required: true, message: '请填写联系手机号' }]"
          />

          <van-cell is-link title="位置" :value="areaTest" @click="showArea = true"/>
          <van-action-sheet v-model="showArea" title="地址">
            <van-area
              :area-list="areaList"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              @cancel="cancelArea"
              @confirm = "confirmArea"
            />
          </van-action-sheet>
          <van-field
            v-model="detailedAddress"
            rows="2"
            autosize
            label="详细地址"
            type="textarea"
            placeholder="请输入详细地址"
            :rules="[{ required: true, message: '请填写供应商详细地址' }]"
          />
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <div class="custom-title">上传营业执照或负责人身份证</div>
              <!--<span class="custom-title"></span>-->
              <van-uploader style="margin-left: 0.8rem" v-model="fileList" multiple :max-count="1" :deletable ="false" :after-read="afterRead"/>
            </template>
          </van-cell>
          <van-cell title="是否有资质证书">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #right-icon>
              <van-radio-group v-model="qualifications" direction="horizontal">
                <van-radio name="1" shape="square" @click="qualificationsShow = true">有资质</van-radio>
                <van-radio name="2" shape="square" @click="qualificationsShow = false">无资质</van-radio>
              </van-radio-group>
            </template>
          </van-cell>
          <div v-show="qualificationsShow">
              <van-cell title="资质证书">
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                  <van-uploader :after-read="afterReadQualifications">
                    <span style="color: #3a8ee6">{{QualificationsState}}</span>
                  </van-uploader>
                </template>
              </van-cell>
          </div>
          <van-field
            border
            readonly
            clickable
            name="picker"
            label="入驻版块"
            :placeholder="supplierType"
            @click="showPicker = true"
            right-icon="arrow-down"
          />
          <!--<van-field v-model="supplierTypeform" name="picker" label="入住版块">-->
            <!--<template #input>-->
              <!--<van-radio-group v-model="supplierTypeform" direction="horizontal">-->
                <!--<van-radio name="1">店铺</van-radio>-->
                <!--<van-radio name="2">施工队</van-radio>-->
              <!--</van-radio-group>-->
            <!--</template>-->
          <!--</van-field>-->

          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>


          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">业务描述及简介</span>
              <textarea
                style="border-radius: 0.5rem;border:1px solid #ccc;width: 100%"
                rows="4"
                v-model="form.supplierTypeText"
                placeholder="请输入业务描述及简介"></textarea>
            </template>
          </van-cell>

          <van-row>
            <van-col span="1">

            </van-col>
            <van-col span="2">
              <van-checkbox v-model="checkeder" @click="xuankaung"></van-checkbox>
            </van-col>
            <van-col span="21">
              <span>我同意淘小建</span>
              <span class="my-span" @click="showCheck">入驻协议</span>
            </van-col>

          </van-row>

          <div align="center">
            <van-button
              type="info"
              size="large"
              style="border-radius: 0.5rem;width: 90%;"
              :disabled="disabled"
              @click="submitApplication">提交</van-button>
          </div>
        </van-form>
      </div>
    </div>
</template>

<script>
  import { moneyuploadVoucher } from "@/api/moneyen";
  import areaList from '@/utils/area';
  import { uploadLicense,installSupplier,uploadCertificate,uploadSupplierPic } from '@/api/commodity/shop_product'
  import {Dialog, Toast} from "vant";

  export default {
    name: "InApplication",
    inject:['reload'],
    data(){
      return{
        checkeder: true,
        valueZJ:'',
        disabled: false,
        showPickerZJ: false,
        value: '',
        supplierTypeform: '',
        columns: ['店铺', '施工队'],
        showPicker: false,
        zhengFile: [],
        fanFile: [],
        areaTest:"请选择",
        areaList,
        // 选择地区展示
        showArea:false,
        // 详细地址
        detailedAddress:null,
        supplierPic:[],
        form:{
          supplierPic:'',
        },
        fileList: [],
        supplierType:"店铺",
        qualifications:"2",
        // 资质证书显示状态
        qualificationsShow:false,
        // 企业logo路径
        // supplierPic:null,
        // 自制上传状态
        QualificationsState:"点击上传"
      }
    },
    methods:{
      xuankaung(){
        if(this.checkeder == true){
          this.disabled = false
        }else if(this.checkeder == false){
          Toast({
            message: "请勾选平台协议。",
            position: "top"
          });
          this.disabled = true
        }
      },


      onConfirm(value) {
        this.value = value;
        this.supplierType = value;
        this.form.supplierTypeform = value;
        this.showPicker = false;
      },
      onConfirmZJ(value){
        this.valueZJ = value;
        this.showPickerZJ = false;
      },
      afterReadZheng(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
      },
      afterReadFan(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
      },
      // 地址取消事件
      cancelArea(res){
        this.showArea = false;
      },
      // 地址确定事件
      confirmArea(res){
        this.areaTest = "";
        for (let i = 0; i < res.length; i++){
          this.areaTest += res[i].name;
        }
        this.form.address = this.areaTest;
        this.showArea = false;
      },
      afterRead(res) {
        console.log(res.file);
        let formData = new FormData();
        formData.append("licenseFile", res.file);
        uploadLicense(formData).then((res) =>{
          this.form.licenseUrl = "http://51jhf.com"+res.data.data;
        })
      },
      submitApplication(){
        console.log("提交")
        if(this.form.supplierTypeform == "店铺"){
          this.form.supplierTypeform = 1;
        }else{
          this.form.supplierTypeform = 2;
        }
        this.form.supplierType = 1;
        this.form.address = this.areaTest + this.detailedAddress;
        if(this.form.address == "请选择" || this.form.linkMan == null
          || this.form.phoneNumber == null || this.form.shopsName == null
           || this.form.supplierTypeText == null){
          Toast({
            message: "信息填写不全",
            position: "top"
          });
        }else if(this.form.licenseUrl == null){
          Toast({
            message: "请上传营业执照",
            position: "top"
          });
        }
        // else if(this.form.supplierPic == null){
        //   Toast({
        //     message: "请上传企业logo",
        //     position: "top"
        //   });
        // }
        else{
          installSupplier(this.form).then((res) =>{
            if(res.data.code == 200){
              Toast({
                message: "申请成功,请等待平台回应",
                position: "top"
              });
              this.reload();
            }else if(res.data.code == 201){
              Toast({
                message: res.data.msg,
                position: "top"
              });
            }else{
              Toast({
                message: "错误,请联系技术人员",
                position: "top"
              });
            }
          })
        }
      },
      showCheck(){
        Dialog.alert({
          messageAlign:'left',
          title: '入驻协议',
          message: '欢迎您与淘小建（以下简称“淘小建”或者“我们”）签署《淘小建入驻协议》（以下简称“本协议”）并使用淘小建自建房平台服务！\n' +
            '在您使用我们提供的服务前，请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款。免除或者限制责任的条款将以粗体标识，您应重点阅读。除非您已阅读并接受本协议所有条款，否则您无权使用淘小建自建房平台提供的服务。您的使用行为将被视为对本协议全部内容的认可。 \n' +
            '1、淘小建自建房平台：指淘小建各经营者共同运营之淘小建移动应用软件（APP）等（包括未来技术发展出现的新的形态）。\n' +
            '淘小建自建房平台服务：指基于互联网，由淘小建自建房平台为用户和商家、注册用户提供商品/服务交易的信息匹配服务以及通过淘小建自建房平台为用户提供的自营的商品/服务。\n' +
            '2、淘小建自建房平台经营主体为河北当途网络科技有限公司。\n' +
            '3、协议效力\n' +
            '（1）在您按照注册页面提示填写信息、阅读并同意本协议并完成全部注册程序后或以其他淘小建允许的方式实际使用淘小建自建房平台服务时，您即受本协议的约束。\n' +
            '（2）您在使用淘小建某一特定服务时，该服务可能会另有单独的协议、相关业务规则等。所有淘小建已经发布的或将来可能发布的规则为本协议不可分割的组成部分，与本协议具有同等法律效力。除另行明确声明外，任何淘小建及其关联公司提供的服务均受本协议约束。\n' +
            '（3）淘小建有权根据国家法律法规的更新、产品和服务规则的调整需要不时地制订、修改本协议及/或各类规则，并以网站或移动应用软件公示的方式进行公示，若修改已公示的协议，则修改后的协议自公示之日起七个自然日后开始生效。如您继续使用淘小建自建房平台服务即表示您接受经修订的协议和规则。如发生有关争议时，以淘小建最新的相关协议和规则为准。\n' +
            '（4）您理解并同意，由于淘小建可能进行业务战略调整，届时由变更后的淘小建经营者与您共同履行本协议并向您提供服务，淘小建各业务经营者的变更不会影响您本协议项下的权益。\n' +
            '4、淘小建自建房平台注册入驻商户利用淘小建自建房平台开展经营活动，依法自负盈亏，独立承担法律责任，与淘小建自建房平台并非任何法律上及事实上的劳动关系、雇佣关系。\n' +
            '5、入驻商户应自行准备如下设备并自行承担如下开支：\n' +
            '（1）上网设备：包括但不限于计算机、手机终端、调制解调器或其他必备的上网装置；\n' +
            '（2）上网开支：包括但不限于网络接入费、手机流量费等费用。\n' +
            '6、关于入驻商户诚信金缴纳：\n' +
            '（1）对于已缴纳诚信金的入驻商户，则缴纳的诚信金作为该入驻商户在淘小建自建房平台所售商品及服务的质量保证金，如所售商品及服务出现质量纠纷，该诚信金作为对用户赔付最大金额，淘小建自建房平台不承担连带赔付责任。\n' +
            '（2）对于未缴纳诚信金的入驻商户，淘小建自建房平台不承担该入驻商户在平台所售商品及服务的质量担保及连带赔付责任。\n' +
            '（3）对于已缴纳诚信金的入驻商户，该入驻商户在撤销淘小建自建房平台所经营店铺后，该商户已缴纳的诚信金将在该商户最后一笔订单质保期结束后方可由淘小建自建房平台退回至该商户指定账户。\n' +
            '7、关于入驻商户提现：订单完成15天以后可提现该笔订单货款金额（须扣除相应提现手续费）\n' +
            '8、入驻商户负责人应当具备中华人民共和国法律规定的与您行为相适应的民事行为能力。若您不具备前述与您行为相适应的民事行为能力，则您及您的监护人应依照法律规定承担因此而导致的一切后果。若您代表法人实体签订本协议，您应获得授权并遵守本协议。（并约束该法人实体）。\n' +
            '9、在使用淘小建自建房平台服务时，您应按照淘小建自建房平台页面的提示提供真实、准确、完整、合法、有效的个人信息、移动电话号码，并根据淘小建自建房平台系统操作提示验证您的手机号码。淘小建在任何时候都有权以相关有效手段验证您所提供的信息，并有权在确定您提供的信息验证不真实时，拒绝向您提供服务或拒绝您使用我们的应用程序。\n' +
            '10、您应当妥善保管在申请注册淘小建自建房平台时获得的账户和密码，不得将其泄露或者提供给任何第三方，否则，由此给您造成的损失及风险由您自行承担。如您无法提供相反的有效证据，您的账户下的一切使用及操作行为均视为您个人所为，除淘小建存在过错外，您应对您账户项下的所有行为结果负责。如您发现他人不当使用您的账户或有任何其他可能危及您的账户安全的情形时，您应当立即以书面的、有效的方式通知淘小建，要求淘小建暂停相关服务。在此，您理解淘小建对您的请求采取行动需要合理时间，淘小建对在采取行动前已经产生的后果（包括但不限于您的任何损失）不承担任何责任。\n' +
            '11、您可以为您的账户设定昵称、头像等，但必须遵守法律法规、社会公德、公序良俗，且不得侵犯他人合法权益，否则，淘小建有权采取限制措施或终止为您提供服务。若您不再属于淘小建注册用户，对于您的原昵称，淘小建可以将其开放给任意用户注册使用。\n' +
            '12、除非有法律规定或依据生效司法裁决，或者符合淘小建公布的条件，否则您的账户、登陆密码和支付密码（如有）和验证码不得以任何方式转让、借用、赠与或继承，否则淘小建有权追究您的违约责任，且由此产生的一切责任均由您承担。\n' +
            '13、淘小建自建房平台不对您发布信息的删除或储存失败负责，淘小建有权判定您的行为是否符合淘小建自建房平台规则的要求，如果您的行为不符合前述要求，淘小建有权终止对您提供服务。依据国家相关法律法规规章，您同意严格遵守以下义务：\n' +
            '（1）不得传输或发表：煽动抗拒、破坏宪法和法律、行政法规实施的言论，煽动颠覆国家政权，推翻社会主义制度的言论，煽动分裂国家、破坏国家统一的言论，煽动民族仇恨、民族歧视、破坏民族团结的言论；\n' +
            '（2）从中国大陆向境外传输资料信息时必须符合中国有关法律法规；\n' +
            '（3）不得利用本平台从事洗钱、窃取商业秘密、窃取个人信息等违法犯罪活动；\n' +
            '（4）不得干扰本网站的正常运转，不得侵入本网站及国家计算机信息系统；\n' +
            '（5）不得传输或发表任何违法犯罪的、骚扰性的、中伤他人的、辱骂性的、恐吓性的、伤害性的、庸俗的、淫秽的、不文明的等信息资料；\n' +
            '（6）不得传输或发表损害国家社会公共利益和涉及国家安全的信息资料或言论；\n' +
            '（7）不得利用在本网站注册的账户进行非法牟利性经营活动（如炒货、转卖等）；\n' +
            '（8）不得发布与所售商品或服务无关的信息；\n' +
            '（9）不得发布任何侵犯他人著作权、商标权等知识产权及其他合法权利的内容。淘小建保留删除网站内涉嫌违反本协议、法律法规政策及不真实的信息内容且无须通知您的权利；  \n' +
            '（10）不得教唆他人从事本条例所禁止的行为。\n' +
            '若您未遵守以上规定的，淘小建有权作出独立判断并采取暂停或者永久关闭您的账号，并且您须对自己的言论和行为承担法律责任。 \n' +
            '14、不得恶意发布非正当竞争商品和价格，违者没收所缴纳诚信金或永久关闭该注册账号。\n' +
            '15、入驻商户将按照不低于《中华人民共和国产品质量法》 、《中华人民共和国消 费者权益保护法》及其他法规、部门规章和国家强制性标准规定的要求，出 \n' +
            '售质量合格商品、提供 “三包”等售后服务，并在店铺醒目位置提示。 \n' +
            '16、出现以下情况时，淘小建有权注销您的账户，本协议于账号注销之日终止：\n' +
            '（1）淘小建有权依据本协议约定注销您的账户；\n' +
            '（2）本协议及/或平台规则变更时，您明示并通知淘小建不愿接受该等变更的；\n' +
            '（3）您有其他影响平台正常经营秩序或违法行为的。 \n' +
            '17、本协议终止后，除法律有明确规定外，淘小建无义务向您或您指定的第三方披露您账户中的任何信息。且淘小建仍享有下列权利：\n' +
            '（1）继续保存您留存于淘小建自建房平台的各类信息；\n' +
            '（2）对于您过往的违约行为，淘小建仍可依据本协议向您追究违约责任。\n' +
            '18、本协议的终止不影响守约方向违约方追究违约责任。\n' +
            '19、商家入驻须遵守《用户取消订单及退款政策》（详情见下面附件），如违反平台有权对其行为进行强行纠正。\n' +
            '20、法律适用\n' +
            '（1）本协议之订立、生效、解释、修订、补充、终止、执行与争议解决均适用中华人民共和国大陆地区法律；如法律无相关规定的，参照商业惯例及/或行业惯例。\n' +
            '（2）如果本协议中任何一条被视为废止、无效或因任何理由不可执行，该条应视为可分的且并不影响任何其余条款的有效性和可执行性。\n' +
            '21、争议：您因使用淘小建自建房平台服务所产生及与平台服务有关的争议，由淘小建与您协商解决。协商不成时，任何一方均可向被告所在地人民法院提起诉讼。\n' +
            '注：上述未尽事宜，双方以平等公正的态度友好协商。\n' +
            '\n' +
            '附件：\n' +
            '用户取消订单及退款政策\n' +
            '温馨提示：当您的订单存在问题需要退款/售后，建议您优先联系卖家咨询，卖家会积极帮您解决您的问题；若您和卖家无法协商一致，建议您按照您的订单状态查看具体的退款操作流程。 \n' +
            '1.用户下单并支付货款后在卖方未发货情况下可以取消订单（定制商品须同卖家协商，卖家同意后方可取消订单）\n' +
            '2.用户下单后如卖方已发货暂不可取消订单，待收货后如符合退货条款即可申请退货退款（定制商品须同卖家协商）并将货物退回至卖家，退货过程中所产生的邮费责任问题，需要卖买双方自行商议。\n' +
            '3.如您申请退款，商家核实后会在3个工作日内将款项退回至您的账户内（如您已使用优惠券则优惠金额不予退还，只退还实际支付金额）。\n' +
            '4.申请退款后，请关注交易超时时间。如卖家拒绝退款申请，买家未能在交易超时时间内作出回应的情况下，系统将会关闭退款协议；若交易还没有结束，买家仍可重新申请退款。如卖家在交易超时时间内没有回应退款申请，系统将会视作卖家默认同意退款申请。如买家选择不需退货，款项直接退回给买家；如买家选择需要退货，买家需将商品寄回给卖家，卖家收货验证无误后将款项退回至您的账户。\n' +
            '5. 如双方在申请退款后3天内还未达成退款协议，您可申请平台介入。客服将会就双方所提供的证据进行公正判定。\n' +
            '6. 如您需要退货，须在退款协议达成之后再安排寄货，以免造成您的财物损失。并请保留退货的快递单并于退款页面内上传相关证明。\n' +
            '7.如全额退款，平台所收的服务费将会一并退回。否则，该服务费将按比例退回。\n' +
            '8.交易成功15天内买家未提出退款申请或申请售后，系统将会自动打款给卖家。\n' +
            '温馨提示：交易成功后15天内若您对商品或服务存在异议，可以发起【申请售后】进行维权。如果已经超过该期限，需要自行与卖家友好沟通，协商处理，如协商未果可申请平台介入，争议处理过程中，淘小建平台有权要求顾客或商家提供证明证据，平台将会就双方所提供的证据进行公正判定。\n' +
            '注：上述条款外的其他事项，平台将根据各方提交证据进行公正判定。',
        }).then(() => {
          // on close
        })
      },
      // 上传资质证书
      afterReadQualifications(res) {
        // 此时可以自行将文件上传至服务器
        console.log(res.file);
        let formData = new FormData();
        formData.append("certificateFile", res.file);
        uploadCertificate(formData).then((res) =>{
          if(res.data.code == 200){
            Toast({
              message: "上传成功",
              position: "top"
            });
            this.QualificationsState = "上传成功";
            this.form.certificate = "http://51jhf.com"+res.data.data;
          }
        })
      },
      // 上传企业logo
      afterReadSupplierPic(e){
        // this.supplierPic = res.content;
        // // 此时可以自行将文件上传至服务器
        // console.log(res.file);
        // let formData = new FormData();
        // formData.append("supplierPicFile", res.file);
        // uploadSupplierPic(formData).then((res) =>{
        //   if(res.data.code == 200){
        //     Toast({
        //       message: "上传成功",
        //       position: "top"
        //     });
        //     this.form.supplierPic = "http://51jhf.com"+res.data.data;
        //   }
        // })
        //注意，我们这里没有使用form表单提交文件，所以需要用new FormData来进行提交
        let fd = new FormData()
        fd.append("file", e.file)
        moneyuploadVoucher(fd).then(res => {
          this.form.supplierPic = "http://51jhf.com/profile/xiazai"+res.data.tu;
          if (res.data.code == 200) {
            Toast({
              message: "上传成功。",
              position: "top"
            });
          } else {
            // alert('第一期支付凭证上传失败，请重试！')
          }

        });

      }


    }

  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 550;
    font-size: 1.3rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .my-span {
    color: #5290ff;
  }
</style>
